<!DOCTYPE html>
<!--[if lte IE 9]><html class="lt-ie10 lt-ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>赛尔（赛er）——编辑资料</title>
    <meta name="keywords" content="赛尔（赛er）是一个面向全国各大高校大学生的一站式社区平台，集竞赛活动发布和讨论为一体，提供发布、查询、组队、经验分享等多元化服务。" />
    <meta name="description"
          content="平台聚合了国内各大高校的校内比赛以及国内外各领域最优质的赛事活动信息。赛事内容囊括创新创业、演讲辩论、财会金融、艺术设计、学科竞赛、公益志愿等众多领域。赛尔（赛er）致力于打造一个融合大学生学习、赛事、活动、保研、考研等为一体的成长交流空间。" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" type="text/css" href="/static/css/top-4.9.6.2.min.css">
    <link rel="stylesheet" type="text/css" href="/static/font/iconfont.css">
    <script type="text/javascript" src="../common/common.js"></script>
    <style type="text/css">
    .title {
        text-align: center;
        font-size: 20px;
        font-weight: bolder;
        margin-bottom: 15px;
    }
    img{
        object-fit: cover;
    }
    .align-center {
        text-align: center;
    }

    form {
        font-size: 16px;
    }

    .cy-info-box {
        margin: 0;
        padding: 10px 0 10px;
        position: relative;
    }

    .cy-info-line {
        width: 100px;
        height: 1px;
        background-color: #dedede;
        margin-bottom: 5px;
    }

    .cy-info-line {
        width: 300px;
    }

    .public {
        display: inline-block;
    }

    .m-l-0 {
        margin-left: 0;
    }

    .m-t-15 {
        margin-top: 15px;
    }

    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-bottom: 10px;
        cursor: pointer;
        object-fit: cover;
    }
    dd.layui-this a {
        background-color: white!important;
    }
    </style>
</head>

<body>
    <!--body-wrap-->
    <div id="app">
        <ul class="layui-nav layui-bg-cyan" style="margin: 0 auto;padding:0 12%" lay-filter="">
            <li style="display: inline-block;line-height: 60px;vertical-align: middle;position: relative;"><a href="/index.html"><img style="height: 60px;margin-right:15px;" src="/static/images/logo.png"></a></li>
            <!-- 选中 加上 layui-this -->
            <li class="layui-nav-item"><a href="/index.html">首页</a></li>
            <li class="layui-nav-item"><a href="/competition/competition.html">竞赛</a></li>
            <li class="layui-nav-item"><a href="/activity/activity.html">活动</a></li>
            <li class="layui-nav-item"><a href="/ask/ask.html">论坛</a></li>
            <li class="layui-nav-item"><a href="/article/article.html">文章</a></li>
            <li class="layui-nav-item" v-if="user!=''&&user!=null&&user!=undefined">
                <a href="javascript:;">发布</a>
                <dl class="layui-nav-child">
                    <!-- 二级菜单 -->
                    <dd><a href="/competition/publish_competition.html">创建竞赛</a></dd>
                    <dd><a href="/activity/publish_activity.html">发布活动</a></dd>
                    <dd><a href="/ask/publish_ask.html">发起提问</a></dd>
                    <dd><a href="/article/publish_article.html">发表文章</a></dd>
                </dl>
            </li>
            <template v-if="user!=''&&user!=null&&user!=undefined">
                <li class="layui-nav-item" style="float: right">
                    <a href="javascript:;" style="padding: 0 20px 0 0px">
                        <img :src="NGINX_SERVER+user.AVATAR" class="layui-nav-img">
                        {{user.NAME}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/my_home.html">我的主页</a></dd>
                        <dd><a href="javascript:void(0);" style="color:red" onclick="logout()">退出登录</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" style="float: right;margin-right: 25px;">
                    <a  href="/user/my_msg.html" style="cursor: pointer;"><i class="layui-icon layui-icon-notice" style="font-size: 18px;"></i><span class="layui-badge" v-if="unreadCount>0">{{unreadCount}}</span></a>
                </li>
            </template>
            <template  v-else>
                <li style="float:right" class="layui-nav-item"><a href="/login.html">登录</a></li>
                <li style="float:right" class="layui-nav-item"><a href="/reg.html">注册</a></li>
            </template>
        </ul>
        <div class="layui-container">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title ">
                    <li class="layui-this" style="font-size: 16px">个人资料</li>
                    <li style="font-size: 16px">账号安全</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item  layui-show align-center">
                        <div class="cy-info-box">
                            <span class="public cy-info-line"></span>
                            <span class="public title">基本信息</span>
                            <span class="public cy-info-line"></span>
                        </div>
                        <form class="layui-form align-center" style="width: 700px;margin: 0 auto" action="">
                            <div>
                                <input @change="filePreview" id="avatar_input" type="file" class="layui-hide">
                                <img id="avatar_box" @click="changeAvatar" v-if="user.AVATAR" :src="NGINX_SERVER+user.AVATAR" class="avatar">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" maxlength="20" v-model="user.NAME" name="title" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block" style="text-align: left">
                                    <input v-model="user.SEX" lay-verify="required" lay-filter="sex" name="SEX" type="radio" value="0" title="男">
                                    <input v-model="user.SEX" lay-verify="required" lay-filter="sex" name="SEX" type="radio" value="1" title="女">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">学校</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" v-model="user.SCHOOL" required lay-verify="required" placeholder="请输入学校" autocomplete="off" class="layui-input">
                                </div>
                                <label class="layui-form-label">专业</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" v-model="user.MAJOR" required lay-verify="required" placeholder="请输入专业" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">签名</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" maxlength="100" placeholder="请输入签名" v-model="user.SIGN" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item align-center">
                                <button class="layui-btn" lay-submit lay-filter="saveInfo">保存</button>
                            </div>
                        </form>
                        <div class="cy-info-box">
                            <span class="public cy-info-line"></span>
                            <span class="public title">荣誉墙</span>
                            <span class="public cy-info-line"></span>
                        </div>
                        <div v-if="honorList.length>0" style="padding: 20px; background-color: #D9EDF7;width: 600px;margin:0 auto 20px">
                            <div class="layui-row" style=" overflow:scroll; width:620px; height:125px; overflow-y:auto; overflow-x:auto;">
                            <div class="layui-row">
                                <div>
                                    <div class="layui-card" v-for="item in honorList">
                                        <div class="layui-card-header" style="font-size: 18px;font-weight: bold">{{item.COMPETITION_NAME}}<i @click="deletePrize(item.HONORWALL_ID)" style="float:right;color:red;cursor: pointer;" class="layui-icon layui-icon-delete"></i><i v-if="item.IS_SEEN=='0'" @click="changeSeen(item.HONORWALL_ID,1)" style="float:right;color:rgb(226 206 105);cursor: pointer;" class="iconfont icon--"></i><i  v-if="item.IS_SEEN=='1'" @click="changeSeen(item.HONORWALL_ID,0)" style="float:right;color:rgb(226 206 105);cursor: pointer;" class="iconfont icon-yanjing"></i></div>
                                        <div class="layui-card-body">
                                            <img style="height: 60px;width:100px;object-fit: cover;" :src="NGINX_SERVER+item.IMG_URL">
                                            {{item.COMPETITION_LEVEL}}-{{item.COMPETITION_PRIZE}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <form class="layui-form" style="width: 800px;margin: 0 auto">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">竞赛名称</label>
                                    <div class="layui-input-inline">
                                        <input v-model="COMPETITION_NAME" type="text" lay-verify="required" autocomplete="off" placeholder="请输入竞赛名称" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">竞赛级别</label>
                                    <div class="layui-input-inline">
                                        <select lay-filter="competition_level" v-model="COMPETITION_LEVEL" lay-verify="required">
                                            <option value=""></option>
                                            <option value="校级">校级</option>
                                            <option value="市级">市级</option>
                                            <option value="省级">省级</option>
                                            <option value="全国性">全国性</option>
                                            <option value="全球性">全球性</option>
                                            <option value="自由">自由</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row m-t-15">
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">奖项</label>
                                    <div class="layui-input-inline">
                                        <input v-model="COMPETITION_PRIZE" type="text" lay-verify="required" autocomplete="off" placeholder="请输入奖项" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">获奖证书</label>
                                    <input lay-verify="prize_input" @change="prizeInputChange" id="prize_input" type="file" class="layui-hide" name="prize_input">
                                    <button :title="FILE_NAME" @click="uploadPrize" style="width: 237px" type="button" class="layui-btn">
                                        <i class="layui-icon" :class="uploadIcon"></i><span>{{uploadText}}</span>
                                    </button>
                                </div>
                            </div>
                            <div class="layui-row m-t-15">
                                <div class="layui-col-md6">
                                <label class="layui-form-label">是否可见</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="" lay-skin="switch" v-mode="IS_SEEN" lay-filter="isSeen">
                                </div>
                                </div>
                            </div>

                            <div class="layui-form-item align-center m-t-15">
                                <button class="layui-btn" lay-submit lay-filter="saveHonor">添加</button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <div class="cy-info-box align-center">
                            <span class="public cy-info-line"></span>
                            <span class="public title">重置密码</span>
                            <span class="public cy-info-line"></span>
                        </div>
                        <div class="layui-form" style="width: 400px;margin: 0 auto;">
                            <div class="layui-form-item">
                                <div class="layui-input-block  m-l-0">
                                    <input type="text" name="title" style="width: 70%;display: inline-block;" disabled="" v-model="user.USERNAME" required lay-verify="required" placeholder="请输入手机号/邮箱" autocomplete="off" class="layui-input"><button @click="sendCode" id="sendCodeBtn" style="width: 30%" class="layui-btn">发送验证码</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block m-l-0">
                                    <input style="width: 100%;" maxlength="6" required lay-verify="required|code" type="number" v-model="code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block m-l-0">
                                    <input type="password" required lay-verify="required" style="width: 100%;" v-model="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <div class="layui-input-block m-l-0">
                                    <input type="password" required lay-verify="required|confirmPass" style="width: 100%;" v-model="confirmPassword" placeholder="请确认密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item align-center">
                                <button class="layui-btn" lay-submit lay-filter="resetPass">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-wrap v-4-2">
        <div class="footer other">
            <div class="common-box footer-box">
                <div class="to-top-box" id="toUpBox">
                    <!--<a href="javascript:;" target="_blank" class="common-icon-big to-feedback-btn" title="意见反馈"></a>-->
                    </a>
                    <div class="iradio-2 to-msite-btn to-msite-btn-2" title="微信公众号">
            <span class="weixin-box" style="margin-top: -42px;">
              <img src="/static/images/erweima.jpg" alt="微信公众号">
              <span class="weixin-txt">关注赛er订阅号</span>
              <img src="/static/images/kefu.jpg" alt="微信客服">
              <span class="weixin-txt">添加赛er客服</span>
              <span class="arrow arrow-right boxL-cor" style="margin-top: -70px;"></span>
            </span>
                    </div>
                    <a href="javascript:;" class="to-top-btn common-icon-big" id="toUp" title="返回顶部"></a>
                </div>
                <div class="fl ft-info-box">
                    <div class="ft-tit" title="关于赛er">关于赛er</div>
                    <ul class="ft-list">
                        <li class="item">
                            <a href="" title="了解赛er" target="_blank" rel="nofollow">了解赛er</a>
                        </li>
                        <li class="item">
                            <a href="./contact.html" title="服务协议" target="_blank" rel="nofollow">服务协议</a>
                        </li>
                        <li class="item">
                            <a href="" title="合作伙伴" target="_blank" rel="nofollow">合作伙伴</a>
                        </li>
                        <li class="item">
                            <a href="" title="加入我们" target="_blank" rel="nofollow">加入我们</a>
                        </li>
                        <li class="item">
                            <a href="" title="隐私协议" target="_blank" rel="nofollow">隐私协议</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ft-info-box">
                    <div class="ft-tit" title="帮助中心">帮助中心</div>
                    <ul class="ft-list">
                        <li class="item">
                            <a href="" title="常见问题" target="_blank" rel="nofollow">常见问题</a>
                        </li>
                        <li class="item">
                            <a href="./legal.html" title="社区规范" target="_blank" rel="nofollow">社区规范</a>
                        </li>
                        <li class="item">
                            <a href="" title="意见反馈" target="_blank" rel="nofollow">意见反馈</a>
                        </li>
                    </ul>
                </div>
                <div class="fr ft-info-box" style="width: 200px;">
                    <div class="ft-tit" title="在线客服">联系我们</div>
                    <ul class="ft-list">
                        <li class="item">
                            赛er<span class="item-dot"></span>客服QQ：<a href="https://wpa.qq.com/msgrd?v=3&uin=412414867&site=qq&menu=yes">412414867</a>
                        </li>
                        <li class="item">
                            赛er<span class="item-dot"></span>官方QQ群：320513949
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- 备案 footer -->
        <div class="ft-btm">
            <div class="common-box ft-btm-box">
                <div class="btn-con">
                    <span class="ft-paragraph">©<span id="nowYear"></span>赛er<span class="s-4"></span></span>
                    <span><a href="https://beian.miit.gov.cn/" target="_blank" style="color: #555;">苏ICP备2021019825号</a></span>
                </div>
            </div>
        </div>
    </div>
    <script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function() {
        var element = layui.element;

        //…
    });
    layui.use('form', function() {
        var form = layui.form;
        form.verify({
            code: [
                /^\d{6}$/, '请输入6位数字的验证码'
            ],
            confirmPass: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (app.password != app.confirmPassword) {
                    return '确认密码不一致！';
                }
            },
            prize_input: function(value, item) {
                if (value == "") {
                    return '请上传证书！';
                }
            }
        });
        form.on('radio(sex)', function(data) {
            app.user.SEX = data.value
        });
        form.on('switch(isSeen)', function(data) {

            app.IS_SEEN = this.checked ? '1' : '0';
        });

        form.on('select(competition_level)', function(data) {
            app.COMPETITION_LEVEL = data.value
        });
        form.on("submit(saveInfo)", function(data) {
            var formData = new FormData();
            formData.append("NAME", app.user.NAME);
            formData.append("SEX", app.user.SEX);
            formData.append("SCHOOL", app.user.SCHOOL);
            formData.append("MAJOR", app.user.MAJOR);
            formData.append("SIGN", app.user.SIGN);
            postDataByFormData('api/user/editUserInfo', formData, res => {
                if (res.code == 200) {
                    toastr.success("个人资料保存成功！")
                    getDataByPost('api/user/getUserInfo', {
                        USER_ID: app.userId
                    }, res => {
                        if (res.code == 200) {
                            sessionStorage.setItem("userInfo",JSON.stringify(res.data))
                        } else {
                            toastr.error(res.msg)
                        }
                    })
                } else {
                    toastr.error(res.msg);
                }
            })
            return false;
        });
        form.on('submit(resetPass)', function(data) {
            getDataByPost('api/user/resetPassword', {
                "username": app.user.USERNAME,
                "password": app.password,
                "code": app.code
            }, res => {
                if (res.code == 200) {
                    toastr.success("密码修改成功，请重新登录！")
                    getDataByGet('api/user/logout?username=' + app.user.USERNAME, {}, res => {
                        if (res.code == 200) {
                            setTimeout(function() {
                                window.location.href = "../login.html"
                            }, 1000)
                        }
                    })
                } else {
                    toastr.error(res.msg)
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(saveHonor)', function(data) {
            var formData = new FormData();
            formData.append("COMPETITION_NAME", app.COMPETITION_NAME)
            formData.append("COMPETITION_LEVEL", app.COMPETITION_LEVEL)
            formData.append("COMPETITION_PRIZE", app.COMPETITION_PRIZE)
            formData.append("IS_SEEN", app.IS_SEEN)
            formData.append("img", app.PRIZE_FILE)
            postDataByFormData('api/user/addHonorWall', formData, res => {
                if (res.code == 200) {
                    toastr.success("新增成功！")
                    app.getHonorWall();
                } else {
                    toastr.error(res.msg)
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    var app = new Vue({
        el: '#app',
        //初始数据
        data: {
            NGINX_SERVER: '',
            user: '',
            userId: '',
            honorList: [],
            //上传文件图标
            uploadIcon: 'layui-icon-upload',
            //上传文件提示
            uploadText: '上传证书',
            //头像
            AVATAR_FILE: '',

            //荣誉信息
            COMPETITION_NAME: '',
            COMPETITION_LEVEL: '',
            COMPETITION_PRIZE: '',
            //证书文件
            PRIZE_FILE: '',
            //证书文件名
            FILE_NAME: '',
            IS_SEEN:"1",


            //账号安全
            code: '',
            password: '',
            confirmPassword: '',

            unreadCount:0
        },
        mounted() {
            this.NGINX_SERVER = NGINX_SERVER
            getUnreadCount(data=>{
                app.unreadCount = data;
            });
            this.user = JSON.parse(sessionStorage.getItem("userInfo"))
            this.userId = this.user.USER_ID
            this.getHonorWall();
        },
        // 监听数据变化 触发layui视图更新
        updated: function() {
            layui.use(['form'], function() {
                var form = layui.form;
                form.render();
            })
        },

        methods: {
            changeSeen(id,seen){
                getDataByPost('api/user/changeHonorWallSeen', {
                    HONORWALL_ID: id,
                    IS_SEEN:seen
                }, res => {
                    if (res.code == 200) {
                        app.getHonorWall();
                    } else {
                        toastr.error(res.msg)
                    }
                })
            },
            deletePrize(id) {
                swal({
                    title: "您确定要删除该荣誉吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    closeOnConfirm: false
                }, function() {
                    getDataByPost('api/user/deleteHonorWall', {
                        HONORWALL_ID: id
                    }, res => {
                        if (res.code == 200) {
                            swal("删除成功！", "您已经永久删除了这项荣誉。", "success");
                            app.getHonorWall();
                        } else {
                            toastr.error(res.msg)
                        }
                    })

                })
            },
            filePreview(e) {
                let _this = this
                var files = e.target.files[0]
                app.IMG_FILE = files;
                if (!e || !window.FileReader) return // 判断是否支持FileReader
                let reader = new FileReader()
                reader.readAsDataURL(files) // 文件转换
                reader.onloadend = function() {
                    $("#avatar_box").attr("src", this.result)
                    var formData = new FormData();
                    formData.append("avatar", files);
                    postDataByFormData('api/user/editUserInfo', formData, res => {
                        if (res.code == 200) {
                            toastr.success("头像更换成功！")
                        } else {
                            toastr.error(res.msg);
                        }
                    })
                }
            },
            prizeInputChange(e) {
                app.PRIZE_FILE = e.target.files[0]
                app.uploadIcon = 'layui-icon-ok-circle'
                app.FILE_NAME = app.PRIZE_FILE.name

                app.uploadText = app.FILE_NAME.substring(0, 20)
                if (app.FILE_NAME.length > 20) {
                    app.uploadText += "..."
                }
            },
            getHonorWall() {
                getDataByGet('api/user/getMyHonorWall', {}, res => {
                    if (res.code == 200) {
                        app.honorList = res.data;
                    } else {
                        toastr.error(res.msg)
                    }
                })
            },
            uploadPrize() {
                $("#prize_input").click()
            },
            changeAvatar() {
                $("#avatar_input").click()
            },
            sendCode() {
                var time = 60;
                var interval = setInterval(function() {
                    $("#sendCodeBtn").addClass("layui-disabled")
                    $("#sendCodeBtn").attr("disabled", true)
                    $("#sendCodeBtn").html(time-- + 's');
                    if (time == -1) {
                        clearInterval(interval);
                        $("#sendCodeBtn").removeClass("layui-disabled")
                        $("#sendCodeBtn").attr("disabled", false)
                        $("#sendCodeBtn").html("发送验证码")
                    }
                }, 1000)
                getDataByPost('api/base/sendCode', {
                    username: app.user.USERNAME
                }, res => {
                    if (res.code == 200) {
                        toastr.success("验证码发送成功！")
                    } else {
                        toastr.warning(res.msg)
                    }
                })

            }
        }

    })
    </script>
    <script>
    </script>
<script>
  toTopFun();
</script>
</body>